<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->

    <title>更换手机号</title>
    <style>

        .change-phone-ts {
            padding: 0.36rem 0.32rem 0.2rem 0.32rem;
            color: rgba(34, 34, 34, 0.6);
        }

        .change-phone-wrap {
            background-color: white;
            padding: 0 0.32rem;
            color: #222222;
            margin-top: 0.16rem;
        }

        .change-phone-item {
            padding: 0.36rem 0 0.34rem 0;
            border-bottom: 1px solid #F2F2F2;
        }

        .change-phone-input {
            width: 4rem;
            padding-left: 0.4rem;
        }

        .change-phone-input input {
            color: #222222;
        }

        .change-phone-yzm {
            color: #2C68FF;
        }

        .change-phone-step {
            padding: 0 0.32rem
        }

        .change-phone-next {
            padding: 0.2rem 2.96rem;
            background: #4E7EF4;
            border-radius: 2px;
            color: #FFFFFF;
        }

    </style>
</head>
<body>

<div class="flex-column h-100-p ff400">
    <!--状态栏-->
    <div class="placeholder-top flex-column bg-white">
        <!--状态栏-->
        <div class="status-bar"></div>
        <!--标题栏-->
        <div class="nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">更换手机号</div>
            <div class="right-bar">
            </div>
        </div>
    </div>
    <div class="flex-1 flex-column">
        <div class="change-phone-wrap fs15">
            <div class="change-phone-item flex-row align-items-center">
                <div>手机号</div>
                <div class="change-phone-input">
                    <input id="change-phone-input" class="fs15" placeholder="请输入手机号"/>
                </div>
            </div>
            <div class="change-phone-item flex-row align-items-center justify-content-between">
                <div class="flex-row align-items-center">
                    <div>验证码</div>
                    <div class="change-phone-input">
                        <input id="change-phone-code" class="fs15" placeholder="请输入验证码"/>
                    </div>
                </div>
                <div class="change-phone-yzm fs14" onclick="getPhoneCaptcha()">获取验证码</div>
            </div>


        </div>
        <div class="change-phone-ts fs13">
            更换手机号成功后，即可用新手机号及当前密码登录
        </div>

        <div class="change-phone-step mt30">
            <div class="change-phone-next" onclick="changePhone()">确认</div>
        </div>

    </div>

</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>


<script>
  let pm = {
    userId: '',
    oldMobile: '',
    vCode: '',
    token: '',
    waitTime: 60
  }
  const phoneCheck = /^1(3|4|5|6|7|8|9)\d{9}$/

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    // 获取用户信息
    getAppUserInfo()
  }

  function reLoadPage() {
    getAppUserInfo()
  }

  function changePhone() {
    pm.vCode = $('#change-phone-code').val()
    pm.mobile = $('#change-phone-input').val()
    if (!pm.mobile || !phoneCheck.test(pm.mobile)) {
      jsBridge.callBridge('toast', {msg: '请输入正确的手机号'})
    } else if (!pm.vCode) {
      jsBridge.callBridge('toast', {msg: '请输入正确的验证码'})
    } else {
      Server.changePhone.modifyMobile({
        mobile: pm.mobile,
        vCode: pm.vCode,
        token: pm.token,
        userId: pm.userId,
        oldMobile: pm.oldMobile
      }).then(data => {
        jsBridge.callBridge('toast', {msg: '更换手机号成功'})
        jsBridge.closeWindows()
      }).catch(_ => {
        jsBridge.callBridge('toast', {msg: '更换手机号失败'})
      })
    }

  }

  function getPhoneCaptcha() {
    pm.mobile = $('#change-phone-input').val()
    if (pm.mobile && phoneCheck.test(pm.mobile)) {
      $('.change-phone-yzm').html(pm.waitTime + 's').removeAttr('onclick')
      Server.login.getPhoneCaptcha({
        mobile: pm.mobile
      }).then(data => {
        pm.token = data.data
      })
      // 倒计时
      let timer = setInterval(function () {
        pm.waitTime -= 1
        if (pm.waitTime > 0) {
          $('.change-phone-yzm').html(pm.waitTime + 's')
        } else {
          $('.change-phone-yzm').html('获取验证码').attr('onclick', 'getPhoneCaptcha()')
          pm.waitTime = 60
          clearInterval(timer)
        }
      }, 1000)
    } else {
      jsBridge.callBridge('toast', {msg: '请输入正确的手机号'})
    }
  }

  function getAppUserInfo() {
    Server.changePassword.getAppUserInfo({}).then(data => {
      pm.oldMobile = data.userInfo.mobile
      pm.userId = data.userInfo.userId
    })
  }

</script>
</html>
